<template>
  <div class="my-pass">
    <el-table
      :data="scoreboard"
      style="width:100%"
      :row-style="tableRowStyle"
      :cell-class-name="tableColumnClassName"
      :header-cell-style="tableHeaderColor"
    >
      <el-table-column prop="rank" label="排名" width="60">
        <template slot-scope="scope">
          <el-tag effect="dark" class="my-rank-el-tag" color="#194568">{{
            scope.row.rank
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="playerName" label="球员" width="190">
        <template slot-scope="scope">
          <div class="team-name">
            <img class="team-logo" :src="scope.row.playerImg" alt="" />
            <span class="team-name-text myColumn">
              <span @click="enterPlayer(scope.row.playerId)">{{
                scope.row.playerName
              }}</span>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="clearance" label="解围" sortable width="105">
      </el-table-column>
      <el-table-column prop="interception" label="抢断" sortable width="105">
      </el-table-column>
      <el-table-column prop="tackle" label="拦截" sortable width="105">
      </el-table-column>
      <el-table-column prop="blockPass" label="封堵传球" sortable width="145">
      </el-table-column>
      <el-table-column prop="blockShot" label="封堵射门" width="145" sortable>
      </el-table-column>
      <el-table-column prop="defenseFoul" label="防守犯规" width="145" sortable>
      </el-table-column>
      <el-table-column prop="card" label="黄/红" width="115" sortable>
      </el-table-column>
      <el-table-column prop="airDuel" label="空中对抗" width="145" sortable>
      </el-table-column>
      <el-table-column prop="rating" label="得分" width="105">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "DefenseRating",
  data() {
    return {
      //进攻数据
      scoreboard: [],
    };
  },
  props: {
    season: {
      type: String,
      default() {
        return "2019赛季";
      },
    },
  },
  watch: {
    season: {
      handler(newSeason) {
        this.getDefenseRating(parseInt(newSeason));
      },
    },
  },
  methods: {
    async getDefenseRating(seasonId) {
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/playerfeatures/statistic/${seasonId}/Defense`
      );
      this.scoreboard = data;
    },
    //设置单个单元格的样式
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (
        rowIndex === 0 &&
        ((columnIndex === 2) | (columnIndex === 3) ||
          columnIndex === 4 ||
          columnIndex === 5 ||
          columnIndex === 6 ||
          columnIndex === 7 ||
          columnIndex === 8 ||
          columnIndex === 9)
      ) {
        return {
          "background-color": "#F1F6F9",
          "padding-left": "21px",
          "padding-top": "20px",
        };
      }
      return { "background-color": "#F1F6F9" };
    },

    //设置表格行的样式
    tableRowStyle({ row, rowIndex }) {
      return { "background-color": "#F1F6F9" };
    },

    //设置指定单元格的ClassName,返回的class不能写在当前组件，要写在全局
    //全局css样式在assets/css/reset.css里面
    tableColumnClassName({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        return "myColumn";
      }
      return "";
    },

    //点击球员进入具体球员
    enterPlayer(playerId) {
      this.$router.push({
        name: "singlePlayer",
        params: { playerId: playerId },
      });
    },
  },
  created() {
    this.getDefenseRating(2019);
  },
};
</script>

<style scoped>
.my-pass {
  width: 1365px;
  height: 821px;
  color: #656f73;
  /*background-color: blue;*/
  margin: auto;
}
.my-el-tag {
  cursor: pointer;
  margin-left: 3px;
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 4px 0;
  line-height: 20px;
  font-size: 14px;
  border-width: 0;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center;
}
.my-rank-el-tag {
  margin-left: 3px;
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 4px 0;
  line-height: 20px;
  font-size: 14px;
  border-width: 0;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center;
}
.table-annotate {
  width: 350px;
  height: 40px;
  /*background-color: red;*/
  margin-left: 17px;
  /*margin-top: 10px;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.champions-league {
  width: 25px;
  height: 25px;
  background-color: #1a936f;
  border-radius: 4px;
}
.play-off {
  width: 25px;
  height: 25px;
  background-color: #4ea3dd;
  border-radius: 4px;
}
.relegation {
  width: 25px;
  height: 25px;
  background-color: #e6e24d;
  border-radius: 4px;
}
.team-name {
  display: flex;
  /*justify-content: space-around;*/
  align-items: center;
  /*margin-left: 3px;*/
  /*background-color: red;*/
}
.team-logo {
  width: 30px;
  height: 30px;
  margin-left: 24px;
}
.team-name-text {
  margin-left: 7px;
}
.active {
  /*color: #606266;*/
  /*text-decoration: none;*/
}
.my-pass /deep/ .el-table td {
  padding: 7px 0; /*no*/
  font-size: 18px;
  text-align: center;
  font-weight: bold;
}
.my-pass /deep/ .el-table th {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.my-pass /deep/ .is-leaf {
  padding: 14px 0; /*no*/
  font-weight: bold;
  color: #909399;
}
</style>
